<template>
    <view class="page-order">
        <view class="page-order__header">
            <u-tabs lineColor="#35BE65" :list="tabList" @change="tabChange" itemStyle="padding:26rpx 64rpx; "></u-tabs>
        </view>
          
        
        <view class="page-order__body pd-v-24">
            <div class="pd-h-10">
                <image src="@/static/6.gif" style="width:100%" mode="widthFix" @click="callPhone"></image>
            </div>
            
            <view class="pd-v-24 pd-h-24 border8 bg-white mr-t-16" v-for="(orderItem,orderIndex) in list" :key="'order'+orderIndex" @click="goDetail(orderItem)">
                <view class="flex mr-b-32 flex-center">
                    <view class="flex-1 font26 lh-28 color-default">
                        订单编号：{{orderItem.orderNumber}}
                    </view>
                    <view v-if="orderItem.status == 1" class="pd-h-8 pd-v-16 border-main border8 font20 lh-28 color-main">
                        正在充电
                    </view>

                    <view v-else-if="orderItem.status == 2" class="pd-h-8 pd-v-16 color-info border8 font20 lh-28 bg-default">
                        充电完成
                    </view>
                      
                </view>

                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        门店名称
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.storeName}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        设备信息
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                       {{orderItem.deviceInfo}} {{orderItem.phoneNumber ? '('+orderItem.phoneNumber+')' : ''}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        开始时间
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.startTime || '-'}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        结束时间
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.endTime || '-'}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        充电时长
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.chargingDuration ? minuteToTime(orderItem.chargingDuration) : '-'}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        充电电量
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.chargingCapacity || '-'}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        实付金额
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.payAmount || '-'}}
                    </view>
                </view>
                  
                  
            </view>
              
        </view>
          
        <tab></tab>
    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onShow,onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { orderList, orderQueryById  } from '@/api/user.js'

import tab from '@/components/tab.vue'

const store = useStore();
const tabList = ref([
    { name: '全部', value: '' },
    { name: '进行中', value: '1' },
    { name: '已完成', value: '2' },
])
const params = ref({
    pageSize:10,
    pageNum:1,
    status:''
})
const total = ref(0)
const list = ref([])

onShow(() => {
    if(store?.user.token) {
        params.value.pageNum = 1
        list.value = []
        getOrderList()

        
    }
})

onLoad(() => {

})

onPullDownRefresh(() => {
    console.log('下拉刷新')
    params.value.pageNum  = 1
    list.value = [];
    getOrderList()
})

const goDetail = (item) => {
    uni.navigateTo({
        url: '/sub_user/pages/orderDetail/orderDetail?id=' + item.id
    })
}

const getOrderList = () => {
    uni.showLoading({
        title:'加载中...',
        mask:true
    })
    orderList(params.value).then(res => {
      uni.stopPullDownRefresh()
        uni.hideLoading()
        if(res.code == 200) {
            list.value = [...list.value,...res.rows]
            total.value = res.total
        }
    }).catch(err => {
       uni.stopPullDownRefresh()
        uni.hideLoading()

        console.log(err)
    })
}


const tabChange = (item) => {
    console.log(item);
    params.value.status = item.value
    params.value.pageNum = 1
    list.value = []
    total.value = 0
    getOrderList()
}

onReachBottom(() => {
    if(list.value.length >= total.value) return
    params.value.pageNum++
    getOrderList()
}) 

const callPhone = () => {
// #ifndef MP-WEIXIN
    uni.makePhoneCall({
        phoneNumber: store?.common?.platformInfo.platformCustomerServicePhone
    });
// #endif

// #ifdef MP-WEIXIN
    wx.openOfficialAccountArticle({
        url:'https://mp.weixin.qq.com/s/SEi3ZUt8Qf95TmXnU4s1vg'
    })
// #endif
}


const minuteToTime = (minutes) => {
  var hours = Math.floor(minutes / 60); 
  if(hours < 1) {
    return `${minutes}分钟`;
  } else {
    var remainingMinutes = minutes - (hours * 60);
    return hours + "小时" + remainingMinutes + "分钟";
  }
  
}



</script>

<style scoped lang="scss">
.page-order {
    
    background:#F7F7F7;
    min-height:100vh;
    padding-bottom:360rpx;

    .page-order__header {
      
      padding-top:156rpx;
    }
}
</style>
